{% extends "base.html" %}

{% block title %}决策支持{% endblock %}

{% block page_title %}决策支持{% endblock %}

{% block extra_css %}
<style>
.decision-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    padding: 20px;
}

.decision-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.decision-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.decision-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.decision-title i {
    color: #3498db;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}

.status-warning {
    background: #fff3cd;
    color: #856404;
}

.status-success {
    background: #d4edda;
    color: #155724;
}

.progress-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin: 15px 0;
    overflow: hidden;
}

.progress-value {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.severity-high { background: #dc3545; }
.severity-medium { background: #ffc107; }
.severity-low { background: #28a745; }

.recommendation {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.recommendation i {
    color: #ffc107;
    margin-top: 3px;
    font-size: 1.2em;
}

.detail-item:hover {
    background: #f8f9fa;
    transition: background-color 0.2s;
}

.details-list {
    margin-top: 20px;
}

.detail-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 8px;
    padding: 15px;
}

.detail-label {
    color: #666;
    font-size: 0.9em;
}

.detail-value {
    font-weight: 500;
}

.prescription-map {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prescription-map:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.decision-header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn i {
    font-size: 1.1em;
}

.auto-refresh-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.auto-refresh-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-sync-alt.spinning {
    animation: spin 1s linear infinite;
}
</style>
{% endblock %}

{% block content %}
<div class="decision-header-actions">
    <button class="btn btn-primary" onclick="refreshData()" title="刷新数据">
        <i class="fas fa-sync-alt"></i> 刷新数据
    </button>
    <label class="auto-refresh-label">
        <input type="checkbox" id="auto-refresh" onchange="toggleAutoRefresh()">
        <span>自动刷新 (30秒)</span>
    </label>
</div>

<div class="decision-container">
    <!-- 精准施药决策 -->
    <div class="decision-card">
        <div class="decision-header">
            <h3 class="decision-title">
                <i class="fas fa-spray-can"></i>
                精准施药决策
            </h3>
            <span class="status-badge status-warning">
                {{ decisions.spray.status }}
            </span>
        </div>
        
        <div class="progress-bar">
            <div class="progress-value severity-high" 
                 style="width: {{ decisions.spray.severity * 100 }}%">
            </div>
        </div>
        
        <p>病虫害分布：{{ decisions.spray.distribution }}</p>
        
        <div class="recommendation">
            <i class="fas fa-lightbulb"></i>
            {{ decisions.spray.recommendation }}
        </div>
        
        <div class="details-list">
            {% for detail in decisions.spray.details %}
            <div class="detail-item">
                <div class="detail-grid">
                    <div>
                        <div class="detail-label">区域</div>
                        <div class="detail-value">{{ detail.area }}</div>
                    </div>
                    <div>
                        <div class="detail-label">问题</div>
                        <div class="detail-value">{{ detail.issue }}</div>
                    </div>
                    <div>
                        <div class="detail-label">严重程度</div>
                        <div class="detail-value">{{ detail.severity }}</div>
                    </div>
                    <div>
                        <div class="detail-label">覆盖面积</div>
                        <div class="detail-value">{{ detail.coverage }}</div>
                    </div>
                    <div>
                        <div class="detail-label">总用量</div>
                        <div class="detail-value">{{ detail.total }}</div>
                    </div>
                    <div>
                        <div class="detail-label">建议措施</div>
                        <div class="detail-value">{{ detail.action }}</div>
                    </div>
                    <div>
                        <div class="detail-label">操作方法</div>
                        <div class="detail-value">{{ detail.method }}</div>
                    </div>
                    {% if detail.duration %}
                    <div>
                        <div class="detail-label">持续时间</div>
                        <div class="detail-value">{{ detail.duration }}</div>
                    </div>
                    {% endif %}
                    <div>
                        <div class="detail-label">注意事项</div>
                        <div class="detail-value">{{ detail.notes }}</div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="prescription-map">
            处方图
        </div>
    </div>
    
    <!-- 精准施肥决策 -->
    <div class="decision-card">
        <div class="decision-header">
            <h3 class="decision-title">
                <i class="fas fa-seedling"></i>
                精准施肥决策
            </h3>
            <span class="status-badge status-warning">
                {{ decisions.fertilizer.status }}
            </span>
        </div>
        
        <div class="progress-bar">
            <div class="progress-value severity-medium" 
                 style="width: {{ decisions.fertilizer.growth_status * 100 }}%">
            </div>
        </div>
        
        <div class="recommendation">
            <i class="fas fa-lightbulb"></i>
            {{ decisions.fertilizer.recommendation }}
        </div>
        
        <div class="details-list">
            {% for detail in decisions.fertilizer.details %}
            <div class="detail-item">
                <div class="detail-grid">
                    <div>
                        <div class="detail-label">区域</div>
                        <div class="detail-value">{{ detail.area }}</div>
                    </div>
                    <div>
                        <div class="detail-label">肥料类型</div>
                        <div class="detail-value">{{ detail.nutrient }}</div>
                    </div>
                    <div>
                        <div class="detail-label">用量</div>
                        <div class="detail-value">{{ detail.amount }}</div>
                    </div>
                    <div>
                        <div class="detail-label">原因</div>
                        <div class="detail-value">{{ detail.reason }}</div>
                    </div>
                    <div>
                        <div class="detail-label">操作方法</div>
                        <div class="detail-value">{{ detail.method }}</div>
                    </div>
                    {% if detail.duration %}
                    <div>
                        <div class="detail-label">持续时间</div>
                        <div class="detail-value">{{ detail.duration }}</div>
                    </div>
                    {% endif %}
                    <div>
                        <div class="detail-label">注意事项</div>
                        <div class="detail-value">{{ detail.notes }}</div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="prescription-map">
            处方图
        </div>
    </div>
    
    <!-- 精准灌溉决策 -->
    <div class="decision-card">
        <div class="decision-header">
            <h3 class="decision-title">
                <i class="fas fa-tint"></i>
                精准灌溉决策
            </h3>
            <span class="status-badge status-success">
                {{ decisions.irrigation.status }}
            </span>
        </div>
        
        <div class="progress-bar">
            <div class="progress-value severity-low" 
                 style="width: {{ decisions.irrigation.soil_moisture * 100 }}%">
            </div>
        </div>
        
        <p>天气预报：{{ decisions.irrigation.weather_forecast }}</p>
        
        <div class="recommendation">
            <i class="fas fa-lightbulb"></i>
            {{ decisions.irrigation.recommendation }}
        </div>
        
        <div class="details-list">
            {% for detail in decisions.irrigation.details %}
            <div class="detail-item">
                <div class="detail-grid">
                    <div>
                        <div class="detail-label">区域</div>
                        <div class="detail-value">{{ detail.area }}</div>
                    </div>
                    <div>
                        <div class="detail-label">墒情</div>
                        <div class="detail-value">{{ detail.moisture }}</div>
                    </div>
                    <div>
                        <div class="detail-label">灌溉量</div>
                        <div class="detail-value">{{ detail.amount }}</div>
                    </div>
                    <div>
                        <div class="detail-label">建议时间</div>
                        <div class="detail-value">{{ detail.timing }}</div>
                    </div>
                    <div>
                        <div class="detail-label">操作方法</div>
                        <div class="detail-value">{{ detail.method }}</div>
                    </div>
                    {% if detail.duration %}
                    <div>
                        <div class="detail-label">持续时间</div>
                        <div class="detail-value">{{ detail.duration }}</div>
                    </div>
                    {% endif %}
                    <div>
                        <div class="detail-label">注意事项</div>
                        <div class="detail-value">{{ detail.notes }}</div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="prescription-map">
            处方图
        </div>
    </div>
</div>
{% endblock %} 